import { useEffect } from "react";
import "./index.scss";

const TianMap = ({ tid, width, height }) => {
  // 初始化地图
  const initMap = () => {
    // 创建地图实例
    let map = new T.Map(tid);
    // 创建地图中心点实例
    let cenerLngLat = new T.LngLat(120.21781, 30.255328);
    // 设置地图中心点和地图缩放等级
    map.centerAndZoom(cenerLngLat, 11);

    /* 创建控件 */
    // 缩放控件
    let cZoom = new T.Control.Zoom({
      position: T_ANCHOR_TOP_RIGHT,
    });
    // 比例尺控件
    let cScale = new T.Control.Scale({
      position: T_ANCHOR_BOTTOM_LEFT,
    });
    // 鹰眼控件
    let cOverviewMap = new T.Control.OverviewMap({
      position: T_ANCHOR_BOTTOM_RIGHT,
      isOpen: true,
    });

    // 地图类型控件
    let cMapType = new T.Control.MapType([
      {
        title: "地图", //地图控件上所要显示的图层名称
        icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
        layer: TMAP_NORMAL_MAP, //地图类型对象，即MapType。
      },
      {
        title: "卫星",
        icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
        layer: TMAP_SATELLITE_MAP,
      },
      {
        title: "卫星混合",
        icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
        layer: TMAP_HYBRID_MAP,
      },
      {
        title: "地形",
        icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png",
        layer: TMAP_TERRAIN_MAP,
      },
      {
        title: "地形混合",
        icon: " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png",
        layer: TMAP_TERRAIN_HYBRID_MAP,
      },
    ]);

    // 添加控件
    map.addControl(cScale);
    map.addControl(cOverviewMap);
    map.addControl(cMapType);
    map.addControl(cZoom);

    // 创建marker
    let marker1 = new T.Marker(new T.LngLat(120.274888, 30.334338), {
      icon: new T.Icon({
        iconUrl: "http://47.92.246.66:1112/image/pt3.png",
        iconSize: new T.Point(30, 30),
      }),
    });

    // 添加marker
    map.addOverLay(marker1);
  };

  // Effect
  useEffect(() => {
    initMap();
  }, [tid, width, height]);

  return (
    <>
      <div
        id={tid}
        style={{
          width,
          height,
        }}
      ></div>
    </>
  );
};

export default TianMap;
